<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <style>
        .layui-tab-title li {
            min-width: 330px;
        }

        .layui-form-item {
            margin: 2px auto;
        }
    </style>
    <script src="lib/layui/layui.js"></script>
    <script src="lib/jquery-1.12.4.js"></script>
</head>
<body>
<div>
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">单规格</li>
            <li>多规格</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" lay-filter="single">
                    <div class="layui-form-item" id="s">
                        <label class="layui-form-label"><span style="color: red">*</span>单规格</label>
                        <div class="layui-input-inline">
                            <input type="text" name="s_module" id="single" lay-verify="single" placeholder="请输入规格名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline"
                             style="margin-top: 20px;display: flex;justify-content: center;align-items: center">
                            <button type="submit" lay-submit="" lay-filter="saveSingle" class="layui-btn layui-btn-normal">
                                保存
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary" onclick="cancel()">取消</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item" id="m">
                <form class="layui-form" lay-filter="multi">
                    <div class="layui-form-item" id="content">
                        <div class="layui-inline" style="margin-bottom: 10px">
                            <label class="layui-form-label"><span style="color: red">*</span>基本单位：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="m_module" id="basic" lay-verify="m_spec"
                                       placeholder="请输入基本规格名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-primary" id="add"><i
                                    class="layui-icon"></i>增加单位
                            </button>
                        </div>
                        <div class="layui-inline">
                            <i class="layui-icon layui-icon-about"
                               style="font-size: 30px; color: #1E9FFF;margin-left: 10px" id="tip"></i>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline"
                             style="margin-top: 20px;display: flex;justify-content: center;align-items: center">
                            <button type="button" lay-submit="" lay-filter="saveMulti" onclick="Multi()" class="layui-btn layui-btn-normal">
                                保存
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary" onclick="cancel()">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['form', 'element','jquery','layer'], function () {
        var form = layui.form, element = layui.element;
        var $ = layui.jquery,layer = layui.layer;
        form.verify({
            single: function (value) {
                if (!value) {
                    return '请输入规格'
                }
                var message = '';
                $.ajax({
                    url : 'xp/spec/verify',
                    data: {'name': value},
                    type: 'post',
                    async: false,
                    dataType:'json',
                    success: function (data) {
                        if(data.obj==null){
                            message = ''
                        }else{
                            message= '该规格已存在'
                        }
                    },
                    error: function () {
                        return false;
                    }
                });
                return message;
            },
            m_spec: function (value) {
                if (!value) {
                    return '请输入规格'
                }
                var number = $(".layui-form-item .layui-inline").find(".layui-input-inline:first").length;
                if(number<3){
                    return '新增失败，单位级数须大于1'
                }
            },
            parent: function (value) {
                if (!value) {
                    return '父级单位不能为空,换算率应为数字且大于0!'
                }
            },
            fu: function (value) {
                var reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if (!value) {
                    return '副单位不能为空，换算率应为数字且大于0!'
                } else if (!(reg.test(value))) {
                    return '换算率应为数字且大于0！'
                }
            }
        });
        var html = $("#content");
        $("#add").click(function () {
            var char = "<div class=\"layui-form-item\">\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                        <label class=\"layui-form-label \"></label>\n" +
                "                        <div class=\"layui-input-inline\">\n" +
                "                            <input type=\"text\" lay-verify=\"parent\" placeholder=\"\" autocomplete=\"off\" class=\"layui-input unit\">\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                      &nbsp;=&nbsp;\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                        <div class=\"layui-input-inline\" style=\"width: 100px;\">\n" +
                "                            <input type=\"text\" lay-verify=\"fu\" autocomplete=\"off\" class=\"layui-input base\">\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-inline\" style='width: 15px'>\n" +
                "                        <span class='index'></span>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                        <button type=\"button\" class=\"layui-btn layui-btn-primary layui-btn-sm\" onclick='fan(this)'><i class=\"layui-icon\"></i></button>\n" +
                "                    </div>\n" +
                "                </div>";

            html.append(char);
            var value = $("#basic").val();
            $(".index").html(value);
            order();
        });

        form.on("submit(saveSingle)",function (data) {
            $.ajax({
                url: ' xp/spec/add',
                data: {'name': $("#single").val(),'type': 0},
                dataType: 'json',
                type: "post",
                async: false,
                success: function (data) {
                    if(data.obj>0){
                        layer.closeAll('iframe'); //关闭所有的iframe层
                        parent.reload('single');
                    }
                },
                complete: function () {
                    layer.msg("新增成功",{icon:1});
                    return false;
                },
                error: function () {
                    layer.msg("新增出错，请稍后再试",{icon:2});
                    return false;
                }
            });
            return false;
        });

    });
    function Multi() {
        var basic = $("#basic").val();
        var parentName = [];
        var parentBase = [];
        var base = $(".base");
        var unit = $('.unit');
        var result = $(".unit:last").val();
        for(var i=0;i<unit.length;i++){
            parentName.push(unit.eq(i).val());
            parentBase.push(base.eq(i).val());
        }
        var result2 = '';
        for(var j=0;j<unit.length;j++){
            if(j==unit.length-1){
                result2 = result2+parentName[j];
            }else{
                result2=parentName[j] +'-';
            }
        }
        var result3 = '';
        for(var k=0;k<base.length;k++){
            if(k==base.length-1){
                result3 = result3+parentBase[k];
            }else{
                result3 = parentBase[k]+ '-';
            }

        }
        result3 = result3 + ')';
        result = result +'：'+ basic+'-'+result2 + '(1-'+result3;
        var msg = '';
        $.ajax({
            url : ' xp/spec/verify',
            data: {'name':result},
            type: 'post',
            async: false,
            dataType: 'json',
            success: function (data) {
                if(data.obj==null){
                    msg = ''
                }else{
                    msg = '该规格已存在';
                    layer.msg(msg,{icon:5});
                }
                return false
            },
            error: function () {
                layer.msg('出现错误',{icon:2})
            }
        });
        if(!msg){
            $.ajax({
                url: ' xp/spec/add',
                data: {'name': result,'type': 1},
                dataType: 'json',
                type: "post",
                async: false,
                success: function (data) {
                    if(data.code==200){
                        parent.reload('multi');
                        layer.closeAll('iframe'); //关闭所有的iframe层

                    }else if(data.code == 500){
                        layer.msg("新增失败",{icon:2});
                    }
                },
                complete: function () {
                    layer.msg("新增成功",{icon:1});

                    return false;
                },
                error: function () {
                    layer.msg("新增出错，请稍后再试",{icon:7});
                    return false;
                }
            });
        }
        console.log(result);
    }
    function fan(obj) {
        obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
        order();
    }


    $("#basic").blur(function () {
        var value = $("#basic").val();
        $(".index").html(value);
    });

    function order() {
        var number = $(".layui-form-item .layui-inline").find("label:first");
        for (var j = 1; j < number.length; j++) {
            number.eq(j).text(j + "级父单位：");
        }
    }

    function cancel() {
        $('#save').attr('disabled', 'disabled');
        parent.layer.closeAll('iframe'); //关闭所有的iframe层
    }

    var tips = "基本单位应为最小度量单位";
    var tip_index = 0;
    jQuery(document).on('mouseenter', '#tip', function () {
        tip_index = layer.tips(tips, '#tip', {time: 0, tips: [2, '#3595CC'], area: ['180px', '40px']});
    }).on('mouseleave', '#tip', function () {
        layer.close(tip_index);
    });


</script>
</html>